<template>
	<!-- 基于el-tabs二次封装 -->
	<div class="my-tab">
		<el-tabs v-model="temp" @tab-change="handleClick" class="my-el-tabs">
			<el-tab-pane v-for="(item, index) in temList" :label="item.label" :key="index" :name="item.name">
				<slot :name="item.name"></slot>
			</el-tab-pane>
		</el-tabs>
		<div v-if="props.tabBtn.length > 0" class="my-tab__btns">
			<span v-for="(v, inx) in props.tabBtn" :key="inx">
				<el-button
					class="my-table__btn"
					size="default"
					:plain="inx !== 0"
					:disabled="v.disable"
					v-if="v.hide"
					@click="onClick(v.fun)"
					v-loading="v?.loading"
					:type="v?.type ? v?.type : 'primary'"
					:color="v?.color"
					>{{ v.text }}</el-button
				>
			</span>
		</div>
	</div>
</template>

<script setup lang="ts" name="myTab">
import { watch, ref, onMounted } from 'vue'
// 定义父组件传过来的值
const props = defineProps({
	// 搜索表单
	activeName: {
		type: [Number, String],
		default: () => 0,
	},
	tabList: {
		type: Array<any>,
		default: () => [],
	},
	tabBtn: {
		type: Array<any>,
		default: () => [],
	},
})

let [temp, temList] = [ref<number | string>(0), ref<Array<any>>([])]
const emit = defineEmits(['changeTabs', 'listenClick'])

onMounted(() => {
	temp.value = props.activeName
	temList.value = props.tabList
})

const handleClick = (tab) => {
	emit('changeTabs', tab)
}

const onClick = (fun: String) => {
	emit('listenClick', fun)
}

watch(
	() => props.activeName,
	(newV) => {
		temp.value = newV
	}
)
</script>

<style scoped lang="scss">
.my-tab {
	position: relative;
	&__btns {
		position: absolute;
		right: 0;
		top: 0;
		.el-button {
			margin-left: 10px;
		}
	}
	.el-tabs__item {
		font-size: var(--el-font-size-base) !important;
	}
}
</style>

<style lang="scss">
.my-tab .el-tabs__nav .el-tabs__active-bar {
	height: 4px !important;
}
</style>
